<template>
  <!--v-app有且只有一个-->
  <v-app id="app">
    <!--导航侧栏，clipped属性用于将侧栏置于应用栏下方，drawer用于侧栏的显示与隐藏-->
    <v-navigation-drawer app clipped v-model="drawer">
      <!--左上方的头像、用户名和邮箱的显示-->
      <v-list>
        <v-list-item two-line>
          <!--头像-->
          <v-list-item-avatar v-if="$store.state.user">
            <v-img v-if="$store.state.user.image" :src="$store.state.user.image" alt="头像"></v-img>
            <v-img v-else src="./assets/avatar.jpg" alt="头像"></v-img>
          </v-list-item-avatar>
          <v-list-item-avatar v-else>
            <v-img src="./assets/avatar.jpg" alt="头像"></v-img>
          </v-list-item-avatar>
          <!--内容-->
          <v-list-item-content>
            <!--用户名-->
            <v-list-item-title v-if="$store.state.user.username">{{ $store.state.user.username }}</v-list-item-title>
            <v-list-item-title v-else>游客</v-list-item-title>
            <!--邮箱-->
            <v-list-item-subtitle v-if="$store.state.user.email">{{ $store.state.user.email }}</v-list-item-subtitle>
            <v-list-item-subtitle v-else>example@mail.com</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      <!--分割线-->
      <v-divider></v-divider>
      <!--导航列表-->
      <v-list nav dense>
        <!--主页-->
        <v-list-item link @click="open('Home')">
          <v-list-item-icon>
            <v-icon>mdi-home</v-icon>
          </v-list-item-icon>
          <v-list-item-title>主页</v-list-item-title>
        </v-list-item>
        <!--帖子,没登录的时候只可以查看-->
        <v-list-item link @click="open('PostList')">
          <v-list-item-icon>
            <v-icon>mdi-comment</v-icon>
          </v-list-item-icon>
          <v-list-item-title>帖子</v-list-item-title>
        </v-list-item>
        <!--用户，仅在登录后可见-->
        <v-list-group v-show="$store.state.token" prepend-icon="mdi-account">
          <template v-slot:activator>
            <v-list-item-title>用户</v-list-item-title>
          </template>
          <!--个人信息-->
          <v-list-group no-action sub-group>
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>个人信息</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item v-for="(info, i) in infos" :key="i" link @click="open(info.target, $store.state.user.id)">
              <v-list-item-title>{{ info.name }}</v-list-item-title>
              <v-list-item-icon>
                <v-icon v-text="info.icon"></v-icon>
              </v-list-item-icon>
            </v-list-item>
          </v-list-group>
          <!--帖子管理-->
          <v-list-group no-action sub-group>
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>管理</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item v-for="(management, i) in managements" :key="i" link @click="open(management.target, $store.state.user.id)">
              <v-list-item-title>{{ management.name }}</v-list-item-title>
              <v-list-item-icon>
                <v-icon v-text="management.icon"></v-icon>
              </v-list-item-icon>
            </v-list-item>
          </v-list-group>
        </v-list-group>
      </v-list>
      <!--导航侧栏的底部插槽-->
      <template v-slot:append>
        <div v-show="$store.state.token == null" class="pa-2">
          <v-btn block color="primary" @click="open('Login')">登录</v-btn>
        </div>
        <div v-show="$store.state.token == null" class="pa-2">
          <v-btn block color="success" @click="open('Register')">注册</v-btn>
        </div>
        <div v-show="$store.state.token != null" class="pa-2">
          <v-btn block color="error" @click="logout()">注销</v-btn>
        </div>
      </template>
    </v-navigation-drawer>

    <!--顶部导航栏-->
    <v-app-bar app clipped-left dense color="blue">
      <v-app-bar-nav-icon v-on:click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>

    <!--主体部分-->
    <v-main>
      <router-view></router-view>
    </v-main>
    <!--尾部-->
    <!--底部导航栏-->
    <v-bottom-navigation app>
      <!--gitee源码地址-->
      <v-btn icon color="blue" href="https://gitee.com/kimu/simv" target="_blank">
        <v-icon>mdi-share-variant</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    drawer: null,
    infos: [
      { name: '基本信息', icon: 'mdi-book', target: 'BaseInformation' },
      { name: '呢称修改', icon: 'mdi-face', target: 'Username' },
      { name: '密码修改', icon: 'mdi-lock', target: 'PasswordChange' },
      { name: '邮箱修改', icon: 'mdi-email', target: 'Email' }
    ],
    managements: [
      { name: '我的帖子', icon: 'mdi-comment', target: 'PostManage' }
    ]
  }),
  methods: {
    open (target, id = null) {
      // 跳转之前先判断当前路由名称是否和目标路由一致，如果一致就不跳转
      if (this.$route.name !== target) {
        // id存在时，跳转到详情页或者用户相关部分
        if (id != null) {
          this.$router.push({
            name: target,
            params: {
              id: id
            }
          })
        } else {
          // id不存在，跳转到列表页，主页之类的页面
          this.$router.push({
            name: target
          })
        }
      }
    },
    logout () {
      // 此处利用django-rest-auth的注销功能
      this.$axios.post('rest_auth/logout/')
        .then(response => {
          console.log(response)
          this.$store.commit('removeToken')
          // 注销后返回主页
          if (this.$route.name !== 'Home') {
            this.$router.push({
              name: 'Home'
            })
          }
        }).catch(error => {
          console.log(error)
        })
    }
  },
  beforeCreate () {
    // 加载时从cookies中获取token
    this.$store.commit('getToken')
  }
}
</script>

<style scoped>
</style>
